//  ate:2009-06-03
//  edit:2010-08-07
//  encoding:UTF-8
//  ＤＯＣＫ画像表示


var gTitle = '戦場のカルマ';
var gkey = 'karma';
var titleSTR = gTitle+" Published by NHN Japan Corporation. Copyright © Dragonfly GF.LTD. All rights reserved.";
var imgList = 9;
var iWb = 320;
var iHb = 240;

// 以下は設定不要
var timeWaitID = null;	//functionで使用

var barImage = "http://amaforest.sakura.ne.jp/ogetc/images/"+gkey+"_all[zombie].jpg";	//結合画像
var barWidth = 550;	//表示するイメージバーの幅

try{	if( common_ImageBarWight ){ var barWidth = common_ImageBarWight; }
}catch(e){ }

var iWs = barWidth / imgList; 	//縮小画像の幅
var iHs = iHb / (iWb / iWs);		//縮小画像の高さ

// ----- IDNameをユニークに設定 -----
var IDName = "obj"+(new Date()).getTime();

document.write('<div id="',IDName,'base" style="text-align:left;"></div>');

document.getElementById(IDName+'base').appendChild( htmlwrite(titleSTR, barImage, imgList, barWidth, iWb, iHb, IDName, iWs, iHs) );


// @@@@@@@@@@ DOCK関連Function @@@@@@@@@@

function htmlwrite(titleSTR, barImage, imgList, barWidth, iWb, iHb, IDName, iWs, iHs){

  var divobj00 = document.createElement('div');
  //divobj00.style.textAlign = 'left';

  var divobj0 = document.createElement('div');
  divobj0.style.border = '1px solid #faa';
  divobj0.style.width = barWidth+'px';
  divobj0.style.height = iHs+'px';

  var divobj1 = document.createElement('div');
  divobj1.style.position = 'absolute';
  //divobj1.style.cssText = 'position:absolute;position:absolute;';
  divobj1.style.width = barWidth+'px';
  divobj1.style.height = iHs+'px';
  divobj1.style.zIndex = 4;

for(var i=0; i<imgList; i++){

	var divobj2 = document.createElement('div');
	divobj2.setAttribute('id', IDName+'a'+i);
	if(document.all){
		divobj2.style.cssText = 'filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);';
	}
	divobj2.style.position = 'absolute';
	divobj2.style.top = '0px';
	divobj2.style.left = (i*iWs)+'px';
	divobj2.style.width = iWs+'px';
	divobj2.style.height = iHs+'px';
	divobj2.style.overflow = 'hidden';

	var imgobj1 = document.createElement('img');
	imgobj1.setAttribute('id', IDName+'b'+i);
	imgobj1.src = barImage;
	imgobj1.width = barWidth;
	imgobj1.height = iHs;
	imgobj1.style.position = 'absolute';
	imgobj1.style.top = '0px';
	imgobj1.style.left = '-'+(i*iWs)+'px';

	divobj2.appendChild(imgobj1);
	divobj1.appendChild(divobj2);

}

	var divobj2 = document.createElement('div');
	divobj2.setAttribute('id', IDName);
	if(document.all){
		divobj2.style.cssText = 'Filter:Alpha(Opacity=0);'
	}else{
		divobj2.style.opacity = 0;
	}
	divobj2.style.zIndex = barWidth;
	divobj2.style.position = 'absolute';
	divobj2.style.width = barWidth+'px';
	divobj2.style.height = iHs+'px';
	divobj2.style.backgroundColor = '#f00';

	if(divobj2.addEventListener){
		divobj2.addEventListener("mousemove", catchCursor, false);
		divobj2.addEventListener("mouseout", outCursor, false);
	}else if (divobj2.attachEvent){
		divobj2.attachEvent("onmousemove", catchCursor);
		divobj2.attachEvent("onmouseout", outCursor);
	}

	divobj1.appendChild(divobj2);
	divobj0.appendChild(divobj1);
	divobj00.appendChild(divobj0);

// --- スライドバー
 var objA = document.createElement('div');
 objA.style.height = '15px';
 objA.style.width = '150px';
 objA.style.zIndex = 0;

 var objB = document.createElement('div');
 objB.setAttribute("id", IDName+'b');
 objB.style.position = "absolute";
 objB.style.zIndex = 0;

 var obj = document.createElement('div');
 obj.style.backgroundColor = '#cef';
 obj.style.fontSize = '10px';
 obj.style.zIndex = 0;
 obj.style.height = '16px';
 //  var b  = (Aw/3.5)/Sh;
 obj.style.width = (parseFloat((barWidth/3.5)/iHs)*16.6)+'px';
 obj.style.position = "absolute";
 objB.appendChild(obj);

 var obj = document.createElement('img');
 obj.src = "http://freemmorpg.web.fc2.com/common/icon/rule2.gif";
 obj.style.zIndex = 1;
 obj.height = 20;
 obj.width = 150;
 obj.style.position = "absolute";
 objB.appendChild(obj);

 var obj = document.createElement('img');
 obj.src = "http://freemmorpg.web.fc2.com/common/icon/tama_03z.gif";
 obj.style.zIndex = 2;
 obj.style.position = "absolute";
 obj.style.left = (parseFloat((barWidth/3.5)/iHs)*16.6-8)+'px';
 objB.appendChild(obj);

 var obj = document.createElement('img');
 obj.src = "http://freemmorpg.web.fc2.com/common/icon/toumei.gif";
 obj.style.zIndex = 3;
 obj.height = 15;
 obj.width = 150;
 obj.style.position = "absolute";

 if (obj.addEventListener){
	obj.addEventListener("mousemove",  iBig2, false);
	obj.addEventListener("click",  iMaru, false);
 }else if (obj.attachEvent){
	obj.attachEvent("onmousemove", iBig2);
	obj.attachEvent("onclick", iMaru);
 }

 objB.appendChild(obj);
 objA.appendChild(objB);

 //table作成
 var objTR = document.createElement('tr');

 var objTD = document.createElement('td');
 objTD.style.fontSize = '14px';
 objTD.innerHTML = '-';
 objTR.appendChild(objTD);

 var objTD = document.createElement('td');
 objTD.appendChild(objA);	//スライドバーの挿入
 objTR.appendChild(objTD);

 var objTD = document.createElement('td');
 objTD.style.fontSize = '14px';
 objTD.innerHTML = '+';
 objTR.appendChild(objTD);

 var objB = document.createElement('tbody');
 objB.appendChild(objTR);

 var objA = document.createElement('table');
 objA.style.border = '1px solid #aaa';
 objA.style.backgroundColor = '#eee';
 objA.appendChild(objB);

	divobj00.appendChild(objA);

 var objA = document.createElement('span');
 objA.innerHTML = parseFloat((barWidth/3.5)/iHs);	//画像拡大率
 objA.setAttribute("id", IDName+'bin2');
 objA.style.display = 'none';
	divobj00.appendChild(objA);

// --- スライドバー end

	var divobj2 = document.createElement('div');
	divobj2.style.cssText = 'padding:2px;font-size:10px;color:#700;';
	divobj2.innerHTML = titleSTR;
	divobj00.appendChild(divobj2);

	var divobj2 = document.createElement('div');
	divobj2.setAttribute('id', IDName+'xxx');
	divobj2.style.display = 'none';

	divobj00.appendChild(divobj2);

	return divobj00;

} //htmlwrite() END

// スライドバー用ファンクション
function iBig2( e ){
 if (!e){ e = window.event; }
 var across = (e.layerX || e.offsetX);
 var thisObj = e.target || e.srcElement;
 var targetObj = thisObj.parentNode.firstChild;

 if(across){
  targetObj.style.width = across+"px";
 }
}
// スライドバー用ファンクション
function iMaru( e ){
 if (!e){ e = window.event; }
 var across = (e.layerX || e.offsetX);
 var thisObj = e.target || e.srcElement;
 var targetObj = thisObj.parentNode.childNodes[2];
 var pObjName = thisObj.parentNode.getAttribute('id');

 if(across){
  var test = parseFloat((across / 16.6).toFixed(1))+1;
  document.getElementById(pObjName+'in2').innerHTML = test;
  targetObj.style.left = (across-8)+"px"
 }
}


//(IDName,barWidth,bairi,iWb,iWs,iHs,i,imgList,iHb,kdFlag,event)
function catchCursor( e ){

  if (!e){ e = window.event; }
  var across = (e.layerX || e.offsetX);
  var targetObj = e.target || e.srcElement;
  var Ary = targetObj.parentNode.childNodes.length-1; //なし
  var id = targetObj.id;
  var Aw = parseInt(targetObj.style.width);
  var Sh = parseInt(targetObj.parentNode.style.height);
  var Sw = Aw/Ary;
  //var b  = (Aw/3.5)/Sh;
  var b  = parseFloat(document.getElementById(id+"bin2").innerHTML);
  var Bw = Sw*b;
  var Bh = Sh*b;
  var f  = 0;

	if(document.getElementById(id+"xxx").innerHTML != 0){
		clearInterval(document.getElementById(id+"xxx").innerHTML);
		document.getElementById(id+"xxx").innerHTML = 0;
	}
	if(timeWaitID){ return; }

	//if (!e){ e = window.event; }
	//var across = (e.layerX || e.offsetX);
	if(!across){ return; }		//マウス座標取得できてない場合離脱
	var activePic = Math.floor(across/Sw);

	var dmyW = [];
	var dmyH = [];
	var allWidth = 0;
	var maxH = 0;
	var zindexFlag = 0;
	for(var i=0; i<Ary; i++){
		//マウス座標と該当画像中心座標との距離
		activeZ = Math.abs(((i*Sw)+(Sw/2))-across);
		//document.getElementById("testviewm"+i).innerHTML = activeZ;

		if(f == 0){ var hani = (Sw*b)*0.6;
		}else{ var hani = Bw*0.6; }

		if(activeZ < hani){
			if(f == 0){ dmyW[i] = Sw + ((hani-activeZ)/hani)*(Sw*b-Sw);
			}else{      dmyW[i] = Sw + ((hani-activeZ)/hani)*(Bw-Sw);   }

			if(f == 0){ dmyH[i] = Sh + ((hani-activeZ)/hani)*(Sh*b-Sh);
			}else{      dmyH[i] = Sh + ((hani-activeZ)/hani)*(Bh-Sh);  }
		}else{
			//hani以上離れたオブジェクトは元のサイズへ
			dmyW[i]  = Sw;
			dmyH[i] = Sh;
		}

		dmyOBJ = document.getElementById(id+"a"+i);
		if(i == activePic){
			zindexFlag = Ary;
			if(document.all){
				try{
					dmyOBJ.filters[0].opacity = 100;
				}catch(e){ }
			}else{
				dmyOBJ.style.opacity = 100;
			}
			dmyOBJ.style.border = "1px solid #f00"; //border line on
		}else{
			if(i < activePic){
				zindexFlag++;
			}else if(i > activePic){
				zindexFlag--;
			}
			if(document.all){
				try{
					dmyOBJ.filters[0].opacity = 70;
				}catch(e){ }
			}else{
				dmyOBJ.style.opacity = 0.7;
			}
			dmyOBJ.style.border = ""; //border line off
		}
		dmyOBJ.style.zIndex = zindexFlag;
		allWidth += dmyW[i];
		if(maxH < dmyH[i]){ maxH = dmyH[i]; }
	}

	var hRitsu = Aw / allWidth;
	var dmyW2 = 0;
	for(var i=0; i<Ary; i++){

		dmyOBJ = document.getElementById(id+"a"+i);
		dmyOBJ.style.width =  dmyW[i]+"px";
		dmyOBJ.style.height = dmyH[i]+"px";
		dmyOBJ.style.left = dmyW2-((dmyW[i]-dmyW[i]*hRitsu)/2)+"px";
		if(dmyH[i] > Sh){
			dmyOBJ.style.top = -((dmyH[i]-Sh)-((dmyH[i]-Sh)/6))+"px";
		}else{
			dmyOBJ.style.top = -(dmyH[i]-Sh)+"px";
		}
		dmyW2 += dmyW[i]*hRitsu;

		dmyOBJ = document.getElementById(id+"b"+i);
		dmyOBJ.width =  dmyW[i]*Ary;
		dmyOBJ.height = dmyH[i];
		dmyOBJ.style.left = -(i*dmyW[i])+"px";
	}

	dmyOBJ = document.getElementById(id);
	dmyOBJ.style.height = maxH+"px";
	if(maxH > Sh){
		dmyOBJ.style.top = -((maxH-Sh)-((maxH-Sh)/6))+"px";
	}else{
		dmyOBJ.style.top = -(maxH-Sh)+"px";
	}

	//ウエイト
	timeWaitID = setTimeout(
			function(){
				timeWaitID = null;
			}
	, 100);

}

//(IDName,barWidth,iWs,iHs,imgList,iWb,iHb)
function outCursor( e ){

  if (!e){ e = window.event; }
  var across = (e.layerX || e.offsetX);
  var targetObj = e.target || e.srcElement;
  var Ary = targetObj.parentNode.childNodes.length-1; //なし
  var id = targetObj.id;
  var Aw = parseInt(targetObj.style.width);
  var Sh = parseInt(targetObj.parentNode.style.height);
  var Sw = Aw/Ary;
  //var b  = (Aw/3.5)/Sh;
  var b  = parseFloat(document.getElementById(id+"bin2").innerHTML);
  var Bw = Sw*b;
  var Bh = Sh*b;

	if( document.getElementById(id+"xxx").innerHTML == 0 ){
		document.getElementById(id+"xxx").innerHTML = setInterval(
			function(){
				var allWidth = 0;
				var maxH = Sh;
				var dmyW = [];
				var dmyH = [];
				for(var i=0; i<Ary; i++){
					dmyOBJ = document.getElementById(id+"a"+i);

					dmyW[i] = eval(dmyOBJ.style.width.replace(/px/,""))*0.90;
					if(dmyW[i] < Sw){ dmyW[i] = Sw; }
					allWidth += dmyW[i];

					dmyH[i] = eval(dmyOBJ.style.height.replace(/px/,""))*0.90;
					if(dmyH[i] < Sh){ dmyH[i] = Sh; }

					if(dmyH[i] > maxH){ maxH = dmyH[i]; }
					dmyOBJ.style.zIndex = 0;
					dmyOBJ.style.border = ""; //border line off
				}

				var hRitsu = Aw / allWidth;
				var dmyW2 = 0;
				for(var i=0; i<Ary; i++){
					dmyOBJ = document.getElementById(id+"a"+i);
					dmyOBJ.style.width =  dmyW[i]+"px";
					dmyOBJ.style.height = dmyH[i]+"px";
					dmyOBJ.style.left = dmyW2-((dmyW[i]-dmyW[i]*hRitsu)/2)+"px";
					if(dmyH[i] > Sh){
						dmyOBJ.style.top = -((dmyH[i]-Sh)-((dmyH[i]-Sh)/6))+"px";
					}else{
						dmyOBJ.style.top = -(dmyH[i]-Sh)+"px";
					}
					if(document.all){
						try{
							dmyOBJ.filters[0].opacity = 100;
						}catch(e){ }
					}else{
						dmyOBJ.style.opacity = 100;
					}
					dmyW2 += dmyW[i]*hRitsu;

					dmyOBJ = document.getElementById(id+"b"+i);
					dmyOBJ.width =  dmyW[i]*Ary;
					dmyOBJ.height = dmyH[i];
					dmyOBJ.style.left = -(i*dmyW[i])+"px";
				}

				dmyOBJ = document.getElementById(id);
				dmyOBJ.style.height = maxH+"px";
				if(maxH > Sh){ dmyOBJ.style.top = -((maxH-Sh)-((maxH-Sh)/6))+"px";
				}else{ dmyOBJ.style.top = -(maxH-Sh)+"px"; }

				if(allWidth <= Aw && maxH <= Sh){
					clearInterval(document.getElementById(id+"xxx").innerHTML);
					document.getElementById(id+"xxx").innerHTML = 0;
				}
			}, 25);

	}//if end
}